<template>
  <h4>First View</h4>
</template>

<script>
import { onActivated, onBeforeUnmount, onDeactivated, onMounted } from 'vue'

export default {
  name: 'first',
  props: {
    hook: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    onActivated(()=>{
      if(props.hook)
        console.log('~~~ First view is activated.')
    })

    onDeactivated(()=>{
      if(props.hook)
       console.log('~~~ First view is deactivated.')
    })

    onMounted(()=>{
      if (props.hook)
        console.log('### First view is mounted.')
    })

    onBeforeUnmount(()=>{
      if (props.hook)
        console.log('### First view will be unmounted.')
    })
  },
}
</script>

<style scoped>
h4 {
  background-color: paleturquoise;
}
</style>